import React, { Component } from 'react'
import './style.scss'
import TopNav from '@/components/TopNav'
import MySwiper from '@/components/MySwiper'
import SearchBtn from './ui/SearchBtn'
import HotCate from './ui/HotCate'
import GoodFood from './ui/GoodFood'
import connect from './connect'
import {
  getSwiperListApi,
  // hotCateListApi,
  goodFoodListApi
} from '@/services/homeApi'

class Index extends Component {
  state = {
    swiperData: [],
    // hotCateData: [],
    goodFoodData: []
  }

  // 获取幻灯片数据
  async getSwiperList() {
    let ret = await getSwiperListApi()
    this.setState({ swiperData: ret.data })
  }
  // // 热门分类
  // async hotCateList() {
  //   let ret = await hotCateListApi()
  //   this.setState({ hotCateData: ret.data })
  // }
  // 精品好菜
  async goodFoodList(page = 1) {
    let ret = await goodFoodListApi(page)
    // 加载更多的数据
    this.setState((state) => ({
      goodFoodData: [...state.goodFoodData, ...ret.data.list]
    }))
    return ret.data.list
  }

  componentDidMount() {
    this.getSwiperList()
    // this.hotCateList()
    this.goodFoodList(1)
    // 获取热门分类数据，如果redux中存在则不去请求获取
    this.props.getHotCateListAction()
  }

  render() {
    const { swiperData, goodFoodData } = this.state
    const {
      history,
      cate: { hotCateData }
    } = this.props
    return (
      <div className="home-box">
        <TopNav title="菜谱大全" sticky={true} />
        {/* 条件渲染 */}
        {swiperData.length > 0 ? (
          <MySwiper data={swiperData} />
        ) : (
          <div style={{ height: 176, width: '100%' }}></div>
        )}
        <SearchBtn history={history} />
        <HotCate data={hotCateData} history={history} />
        {/* 条件渲染 */}
        {goodFoodData.length > 0 ? (
          <GoodFood
            history={history}
            data={goodFoodData}
            goodFoodList={this.goodFoodList.bind(this)}
          />
        ) : null}
      </div>
    )
  }
}

export default connect(Index)
